<script setup>
import TreeItem from "./components/TreeItem/TreeItem.vue";
import MyInput from "@/components/MyInput/MyInput.vue";
import { useParamsStore } from "@/stores/params.js";
import { computed, ref, watch } from "vue";
import api from "@/api";
import bus from "@/utils/bus.js";

const emits = defineEmits(["update:treePick", "levelClk", "goback"]);
const props = defineProps({
  menuBtns: {
    type: Array,
    default: () => [],
  },
  treePick: {
    type: Array,
    default: () => [],
  },
});
const paramsStore = useParamsStore();
const treeData = computed(() => paramsStore.treeData);
const list1 = computed(() => {
  const res = treeData.value?.[0]?.children ?? [];
  const hideList = ["花溪枢纽楼", "观山湖枢纽楼", "花溪枢纽楼B栋"];
  return res.filter((item) => !hideList.includes(item.addressName));
});
const list2 = computed(() => {
  const res = list1.value.find((item) => item.id === sltBuild.value);
  return res?.children ?? [];
});

const list3 = computed(() => {
  const res = list2.value.find((item) => item.id === sltRoom.value) ?? {};
  const list = res?.children ?? [];
  const searchList = list.filter(
    (item) => item.addressName.indexOf(jiguiSearch.value) !== -1
  );
  return searchList;
});

const list4 = computed(() => {
  const res = list3.value.find((item) => item.id === sltJigui.value) ?? {};
  const list = res?.children ?? [];
  const searchList = list
    .filter((item) => item.addressName.indexOf(devSearch.value) !== -1)
    .map((item) => ({
      ...item,
      id: item.id,
      label: item.addressName,
      type: item.type,
      t: 1,
    }));

  if (list2.value.map((item) => item.id != "020C22")) {
    const filteredData = searchList.filter((item) => {
      const isNameStartingWithSpecificLetters = /^[ABCDEFGHIJKL]/.test(item.addressName);

      const specificKeywords = ["管控柜", "UPS", "空调", "列头柜", "温湿度", "恒湿机"];
      const isSpecificKeyword = specificKeywords.some((keyword) =>
        item.addressName.includes(keyword)
      );

      return isNameStartingWithSpecificLetters || isSpecificKeyword;
    });

    return filteredData;
  }
});
const sltBuild = ref("");
const sltRoom = ref("");
const sltJigui = ref("");
const sltDev = ref("");
const jiguiSearch = ref("");
const devSearch = ref("");
const sltBtn = ref(0);
//递归操作
const SearchId = (nodes, query, result = []) => {
  nodes.forEach((node) => {
    if (node.addressName.includes(query)) {
      const ids = node;
      result.push(ids);
    }
    if (node.children) {
      SearchId(node.children, query, result);
    }
  });
  return result;
};
watch(
  () => props.treePick,
  (val) => {
    sltBuild.value = val?.[0] ?? "";
    sltRoom.value = val?.[1] ?? "";
    sltJigui.value = val?.[2] ?? "";
  },
  { immediate: true }
);
const callFaCom = () => {
  let res = [];
  if (sltBuild.value) {
    res.push(sltBuild.value);
  }
  if (sltRoom.value) {
    res.push(sltRoom.value);
  }
  if (sltJigui.value) {
    res.push(sltJigui.value);
  }
  if (sltDev.value) {
    res.push(sltDev.value);
  }
  emits("update:treePick", res);
};
const goback = () => {
  sltBuild.value = "";
  sltRoom.value = "";
  sltJigui.value = "";
  sltDev.value = "";
  emits("goback");
  callFaCom();
};
const changePrams = (e) => {
  const length = (e + "").split("-").length;
  // 判断点击的层级，目前只支持数据下钻到机房级别
  if (length < 4) {
    const addressId = paramsStore.getAddressFromUeId(e);
    paramsStore.setParamsAll({ type: length, addressId });
  }
};
const levelClk = (item) => {
  emits("levelClk", item);
};

const buildClk = (item) => {
  sltBuild.value = item.id;
  sltRoom.value = "";
  sltJigui.value = "";
  sltDev.value = "";
  levelClk(item);
  changePrams(item.ueId);
  callFaCom();
};

const roomClk = (item) => {
  sltRoom.value = item.id;
  sltJigui.value = "";
  sltDev.value = "";
  levelClk(item);
  changePrams(item.ueId);
  callFaCom();
};

const jiguiClk = async (item) => {
  sltJigui.value = item.id;
  sltDev.value = "";
  if (!item.children) {
    const { data } = await api.getNewTree({ parentId: item.id });
    item.children = data;
  }
  levelClk(item);
  callFaCom();
};

const devClk = (item) => {
  bus.emit("DeviceUEID", item.ueId);
  console.log("点击：", item);
  sltDev.value = item.id;
  levelClk(item);
  callFaCom();
};
</script>

<template>
  <div class="menu-box">
    <div class="go-back" @click="goback"></div>
    <div class="search-ipt">
      <!-- <MyInput v-model="searchIpt" placeholder="请输入搜索内容" /> -->
    </div>
    <div class="tree-box" style="pointer-events: all">
      <div class="list-box build-list">
        <TreeItem
          v-for="(item, index) of list1"
          :key="index"
          :label="item.addressName"
          @click.native="buildClk(item)"
          :active="item.id === sltBuild"
        />
      </div>
      <div class="list-box room-list" v-show="sltBuild">
        <TreeItem
          v-for="(item, index) of list2"
          :key="index"
          :label="item.addressName"
          @click.native="roomClk(item)"
          :active="item.id === sltRoom"
        />
      </div>
      <div class="list-box jigui-list" v-show="sltRoom">
        <MyInput v-model="jiguiSearch" placeholder="请输入搜索内容" />
        <div style="flex: 1; min-height: 0; overflow: auto; margin-top: 10px">
          <TreeItem
            v-for="(item, index) of list3"
            :key="index"
            :label="item.addressName"
            @click.native="jiguiClk(item)"
            :active="item.id === sltJigui"
          />
        </div>
      </div>
      <div class="list-box dev-list" v-show="sltJigui">
        <MyInput v-model="devSearch" placeholder="请输入搜索内容" />
        <div style="flex: 1; min-height: 0; overflow: auto; margin-top: 10px">
          <TreeItem
            v-for="(item, index) of list4"
            :key="index"
            :label="item.addressName"
            @click.native="devClk(item)"
            :active="item.id === sltDev"
          />
        </div>
      </div>
    </div>
    <div class="search-ipt"></div>
  </div>
</template>

<style scoped lang="scss">
.menu-box {
  // width: 690px;
  height: 100%;
  background-image: url(/imgs/31.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  padding-left: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;

  .go-back {
    pointer-events: all;
    position: absolute;
    width: 70px;
    height: 70px;
    left: 3%;
    top: 47%;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .search-ipt {
    width: 100%;
    height: 56px;
  }

  .tree-box {
    height: 59%;
    padding-left: 120px;
    display: flex;

    .list-box {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: auto;
    }

    .build-list {
      min-width: 150px;
      border-right: 2px solid #434d62;
      margin-right: 10px;
    }

    .room-list {
      height: fit-content;
      max-height: 100%;
      min-width: 150px;
      border-right: 2px solid #434d62;
      margin-right: 10px;
    }

    .jigui-list {
      height: fit-content;
      max-height: 100%;
      min-width: 250px;
      border-right: 2px solid #434d62;
      margin-right: 10px;
      position: relative;
    }

    .dev-list {
      min-width: 480px;
      height: fit-content;
      max-height: 100%;
    }
  }
}
</style>
